背景简介
云跟贴的DOM节点直接嵌入到了文章容器页面里,广大的站长朋友门,可以很方便地通过覆盖已有的CSS(层叠样式表---Cascading Style Sheets,是一种用来表现HTML文件样式的计算机语言)来定制外观样式(当然了,您需要了解基本的CSS的语法规则,并且我们也不推荐您无底线地修改,造成地兼容性问题,会让我们都很头疼,适可而止就好了)
云跟贴的视图都包裹在一个祖先DOM节点(DIV#yun-tie-sdk-wrap)下,想要覆盖某处DOM节点的样式,只需在云跟贴代码的下面,插入相应规则的样式代码即可。比如要修改整体的字体样式,如下:
css
/* 云跟贴视图代码 */
#yun-tie-sdk-wrap {
/*将字体调整为 微软雅黑*/
font-family: Microsoft Yahei;
/* 将字体大小调整为 14像素 */
font-size: 14px;
}
/* 调整云跟贴区域和上面文章内容区域的间距 */
#yun-tie-sdk-wrap .tie-title-bar {
/* 默认是25像素,下面调整成10像素 */
padding-top: 10px;
}
/* 云跟贴视图代码 */
#yun-tie-sdk-wrap {
/*将字体调整为 微软雅黑*/
font-family: Microsoft Yahei;
/* 将字体大小调整为 14像素 */
font-size: 14px;
}
/* 调整云跟贴区域和上面文章内容区域的间距 */
#yun-tie-sdk-wrap .tie-title-bar {
/* 默认是25像素,下面调整成10像素 */
padding-top: 10px;
}
主要节点样式调整
标题栏和文章内容的间距
css
#yun-tie-sdk-wrap .tie-title-bar {
/* 默认是25像素,下面调整成15像素 */
padding-top: 15px;
}
</style>
#yun-tie-sdk-wrap .tie-title-bar {
/* 默认是25像素,下面调整成15像素 */
padding-top: 15px;
}
</style>
标题栏 参与人数
css
#yun-tie-sdk-wrap .tie-title-bar .active-wrap .tie-actCount {
/* 字体颜色 */
color: #d91736;
/* 字体大小 */
font-size: 24px;
}
#yun-tie-sdk-wrap .tie-title-bar .active-wrap .tie-actCount {
/* 字体颜色 */
color: #d91736;
/* 字体大小 */
font-size: 24px;
}
发帖框
css
#yun-tie-sdk-wrap .tie-input-bar {
/* 发帖框和标题栏的间距 */
margin-top: 10px;
}
/* 发帖框的高度(需要修改两处) */
#yun-tie-sdk-wrap .input-box {
height: 120px;
}
#yun-tie-sdk-wrap .input-box .tie-textarea, #yun-tie-sdk-wrap .input-box .input-tips {
height: 80px;
}
#yun-tie-sdk-wrap .tie-input-bar {
/* 发帖框和标题栏的间距 */
margin-top: 10px;
}
/* 发帖框的高度(需要修改两处) */
#yun-tie-sdk-wrap .input-box {
height: 120px;
}
#yun-tie-sdk-wrap .input-box .tie-textarea, #yun-tie-sdk-wrap .input-box .input-tips {
height: 80px;
}
发帖框底部横条
css
/* 发帖框底部 横条 */
#yun-tie-sdk-wrap .input-box .tie-submit-row {
height: 40px;
/* 背景色 */
background-color: #f7f8f9;
}
/* 发帖框底部 横条 */
#yun-tie-sdk-wrap .input-box .tie-submit-row {
height: 40px;
/* 背景色 */
background-color: #f7f8f9;
}
发帖框 用户信息
css
/* 头像图片 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {
/* 头像大小 */
width: 32px;
height: 32px;
/* 距离四周的间距 */
margin: 4px 10px 4px 8px;
/* 鼠标样式 */
cursor: pointer;
}
/* 昵称 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .nickname {
/* 字体颜色 */
color: #3f96ec;
cursor: pointer;
}
/* 退出链接 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit {
color: #acacac;
cursor: pointer;
}
/* 退出链接(鼠标悬停效果) */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit:hover {
color: #616060;
}
/* 头像图片 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {
/* 头像大小 */
width: 32px;
height: 32px;
/* 距离四周的间距 */
margin: 4px 10px 4px 8px;
/* 鼠标样式 */
cursor: pointer;
}
/* 昵称 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .nickname {
/* 字体颜色 */
color: #3f96ec;
cursor: pointer;
}
/* 退出链接 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit {
color: #acacac;
cursor: pointer;
}
/* 退出链接(鼠标悬停效果) */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit:hover {
color: #616060;
}
发帖按钮
css
#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
width: 112px;
height: 40px;
line-height: 40px;
}
#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
width: 112px;
height: 40px;
line-height: 40px;
}
选项卡栏
css
/* 选项卡栏 */
#yun-tie-sdk-wrap .tie-tab-bar {
/* 距离上面发帖框的间距 */
margin-top: 27px;
/* 底部边框线: 实线 1像素宽 边线颜色 */
border-bottom: solid 1px #dee4e9;
}
/* 选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li {
/* 文本居中展示 */
text-align: center;
/* 鼠标悬停,手型效果 */
cursor: pointer;
/* 高度 */
height: 32px;
/* 字体行高 */
line-height: 33px;
}
/* 选中状态的选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
/* 字体样式加粗 */
font-weight: bold;
/* 左上角 4像素的圆角效果 */
border-top-left-radius: 4px;
/* 右上角 4像素的圆角效果 */
border-top-right-radius: 4px;
/* 白色背景 */
background-color: #fff;
}
/* 选项卡栏 */
#yun-tie-sdk-wrap .tie-tab-bar {
/* 距离上面发帖框的间距 */
margin-top: 27px;
/* 底部边框线: 实线 1像素宽 边线颜色 */
border-bottom: solid 1px #dee4e9;
}
/* 选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li {
/* 文本居中展示 */
text-align: center;
/* 鼠标悬停,手型效果 */
cursor: pointer;
/* 高度 */
height: 32px;
/* 字体行高 */
line-height: 33px;
}
/* 选中状态的选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
/* 字体样式加粗 */
font-weight: bold;
/* 左上角 4像素的圆角效果 */
border-top-left-radius: 4px;
/* 右上角 4像素的圆角效果 */
border-top-right-radius: 4px;
/* 白色背景 */
background-color: #fff;
}
推广文案
css
#yun-tie-sdk-wrap .tie-tab-bar .promote-txt {
/* 字体颜色 */
color: #c9c9c9;
/* 字体行高 */
line-height: 33px;
/* 字体大小 */
font-size: 12px;
}
#yun-tie-sdk-wrap .tie-tab-bar .promote-txt {
/* 字体颜色 */
color: #c9c9c9;
/* 字体行高 */
line-height: 33px;
/* 字体大小 */
font-size: 12px;
}
单条帖子
css
#yun-tie-sdk-wrap .single-tie {
/* 背景色 */
background-color: #fff;
/* 顶部边框 */
border-top: solid 1px #dee4e9;
overflow: hidden;
/* 内边距:上 右 下 左 */
padding: 20px 8px 10px 10px;
}
/* 鼠标悬停在某条帖子上面时,变换背景色 */
#yun-tie-sdk-wrap .single-tie:hover {
background-color: #f9fafa;
}
#yun-tie-sdk-wrap .single-tie {
/* 背景色 */
background-color: #fff;
/* 顶部边框 */
border-top: solid 1px #dee4e9;
overflow: hidden;
/* 内边距:上 右 下 左 */
padding: 20px 8px 10px 10px;
}
/* 鼠标悬停在某条帖子上面时,变换背景色 */
#yun-tie-sdk-wrap .single-tie:hover {
background-color: #f9fafa;
}
帖子里的头像部分
css
#yun-tie-sdk-wrap .single-tie .photo {
position: relative;
float: left;
/* 头像大小 更改下面三个属性 */
width: 42px;
height: 42px;
margin-right: -42px;
/* 头像大小 更改上面三个属性 */
border-radius: 50%;
cursor: pointer;
z-index: 1;
}
/* 头像图片大小 */
#yun-tie-sdk-wrap .single-tie .photo img {
width: 42px;
height: 42px;
}
#yun-tie-sdk-wrap .single-tie .photo {
position: relative;
float: left;
/* 头像大小 更改下面三个属性 */
width: 42px;
height: 42px;
margin-right: -42px;
/* 头像大小 更改上面三个属性 */
border-radius: 50%;
cursor: pointer;
z-index: 1;
}
/* 头像图片大小 */
#yun-tie-sdk-wrap .single-tie .photo img {
width: 42px;
height: 42px;
}
发帖人称谓部分
css
/* 和下面帖子内容的间距 */
#yun-tie-sdk-wrap .single-tie > .tie-bdy > .bdy-inner > .tie-author {
margin-bottom: 12px;
}
/* 和下面帖子内容的间距 */
#yun-tie-sdk-wrap .single-tie > .tie-bdy > .bdy-inner > .tie-author {
margin-bottom: 12px;
}
发帖人昵称
css
#yun-tie-sdk-wrap .single-tie .tie-author .name-nick {
color: #3f96ec;
display: inline-block;
cursor: pointer;
/* 字体类型---微软雅黑 */
font-family: Microsoft YaHei;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-nick {
color: #3f96ec;
display: inline-block;
cursor: pointer;
/* 字体类型---微软雅黑 */
font-family: Microsoft YaHei;
}
站点地理位置信息
css
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {
/* 距离右边间距 5 像素 */
margin-right: 5px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp, #yun-tie-sdk-wrap .single-tie .tie-author .name-ip {
color: #999;
/* 距离左边间距 8 像素 */
margin: 0 0 0 8px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {
/* 距离右边间距 5 像素 */
margin-right: 5px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp, #yun-tie-sdk-wrap .single-tie .tie-author .name-ip {
color: #999;
/* 距离左边间距 8 像素 */
margin: 0 0 0 8px;
}
发帖时间部分
css
#yun-tie-sdk-wrap .single-tie .tie-time {
/* 字体颜色 */
color: #c9c9c9;
/* 左边间距 10 像素 */
margin: 0 0 0 10px;
/* 右浮动,形成右对齐的效果 */
float: right;
}
#yun-tie-sdk-wrap .single-tie .tie-time {
/* 字体颜色 */
color: #c9c9c9;
/* 左边间距 10 像素 */
margin: 0 0 0 10px;
/* 右浮动,形成右对齐的效果 */
float: right;
}
帖子内容
css
#yun-tie-sdk-wrap .single-tie .tie-cnt {
/* 字体大小 */
font-size: 14px;
/* 换行方式: */
word-wrap: break-word;
/* 字体行高 */
line-height: 20px;
/* 距离上、下元素的间距分别是9、28像素 */
margin: 9px 0 28px 0;
}
#yun-tie-sdk-wrap .single-tie .tie-cnt {
/* 字体大小 */
font-size: 14px;
/* 换行方式: */
word-wrap: break-word;
/* 字体行高 */
line-height: 20px;
/* 距离上、下元素的间距分别是9、28像素 */
margin: 9px 0 28px 0;
}
帖子里 工具栏部分
css
#yun-tie-sdk-wrap .single-tie .tool-bar {
/* 右对齐方式 */
text-align: right;
/* 文字颜色 */
color: #999;
/* 距右边距 18像素 */
margin-right: 18px;
/* 距左边距 10像素 */
margin-bottom: 10px;
}
#yun-tie-sdk-wrap .single-tie .tool-bar {
/* 右对齐方式 */
text-align: right;
/* 文字颜色 */
color: #999;
/* 距右边距 18像素 */
margin-right: 18px;
/* 距左边距 10像素 */
margin-bottom: 10px;
}
顶踩按钮
css
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up, #yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
/* 图标大小 */
width: 14px;
height: 16px;
/* 四周(上、右、下、左)间距 */
margin: 0 5px 0 15px;
/* 相对原来的位置向上偏移3像素 */
position: relative;
top: -3px;
}
/* 更改按钮上的图标 */
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up {
background: url(icons.png) 0 0 no-repeat
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
background: url(icons.png) 0 0 no-repeat
}
/* 顶、踩按钮➕1效果 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one,
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
/* 绝对定位 */
position: absolute;
top: -25px;
left: 20px;
/* 字体大小 */
font-size: 18px;
color: #e31436;
font-family: Arial;
/* 斜体字体 */
font-style: italic;
z-index: 9;
/* 初始透明度为0 */
filter: alpha(opacity=0);
}
/* 动画行为 持续时间 1 秒 线性渐变 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one {
-webkit-animation: upone 1s linear forwards;
animation: upone 1s linear forwards;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
color: #3f96ec;
-webkit-animation: upone 1s linear forwards;
animation: upone 1s linear forwards;
}
/* 动画过度帧(兼容写法) */
@-webkit-keyframes upone {
0% {
transform: scale(1);
}
32% {
transform: scale(1.4);
}
68% {
transform: scale(1.4);
}
99% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/* 动画过度帧 */
@keyframes upone {
0% {
transform: scale(1);
}
32% {
transform: scale(1.4);
}
68% {
transform: scale(1.4);
}
99% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up, #yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
/* 图标大小 */
width: 14px;
height: 16px;
/* 四周(上、右、下、左)间距 */
margin: 0 5px 0 15px;
/* 相对原来的位置向上偏移3像素 */
position: relative;
top: -3px;
}
/* 更改按钮上的图标 */
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up {
background: url(icons.png) 0 0 no-repeat
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
background: url(icons.png) 0 0 no-repeat
}
/* 顶、踩按钮➕1效果 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one,
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
/* 绝对定位 */
position: absolute;
top: -25px;
left: 20px;
/* 字体大小 */
font-size: 18px;
color: #e31436;
font-family: Arial;
/* 斜体字体 */
font-style: italic;
z-index: 9;
/* 初始透明度为0 */
filter: alpha(opacity=0);
}
/* 动画行为 持续时间 1 秒 线性渐变 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one {
-webkit-animation: upone 1s linear forwards;
animation: upone 1s linear forwards;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
color: #3f96ec;
-webkit-animation: upone 1s linear forwards;
animation: upone 1s linear forwards;
}
/* 动画过度帧(兼容写法) */
@-webkit-keyframes upone {
0% {
transform: scale(1);
}
32% {
transform: scale(1.4);
}
68% {
transform: scale(1.4);
}
99% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/* 动画过度帧 */
@keyframes upone {
0% {
transform: scale(1);
}
32% {
transform: scale(1.4);
}
68% {
transform: scale(1.4);
}
99% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
按钮分隔线
css
#yun-tie-sdk-wrap .single-tie .tool-bar .i-split {
/* 分隔线颜色 */
color: #dee4e9;
/* 左右间距 */
margin: 0 10px;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-split {
/* 分隔线颜色 */
color: #dee4e9;
/* 左右间距 */
margin: 0 10px;
}
回复框
css
#yun-tie-sdk-wrap .input-box.z-reply {
margin-top: 20px;
margin-bottom: 10px;
}
/* 和发帖框相同的DOM节点 */
#yun-tie-sdk-wrap .input-box {
position: relative;
border: solid 1px #dee4e9;
height: 155px;
border-radius: 4px;
overflow: hidden;
}
/* 聚焦状态时 边框变成红色 */
#yun-tie-sdk-wrap .input-box.z-fcs {
border-color: #ef2d36;
}
#yun-tie-sdk-wrap .input-box.z-reply {
margin-top: 20px;
margin-bottom: 10px;
}
/* 和发帖框相同的DOM节点 */
#yun-tie-sdk-wrap .input-box {
position: relative;
border: solid 1px #dee4e9;
height: 155px;
border-radius: 4px;
overflow: hidden;
}
/* 聚焦状态时 边框变成红色 */
#yun-tie-sdk-wrap .input-box.z-fcs {
border-color: #ef2d36;
}
分享栏
css
.shareListWin {
/* 绝对定位 和 坐标 */
position: absolute;
top: -999px;
left: -999px;
/* 宽度 和 高度 */
width: 101px;
height: 34px;
/* 边框 1像素宽 实线 颜色 */
border: 1px solid #dbdcdc;
/* 背景色 */
background: #fff;
box-sizing: content-box;
/* 展示优先级 */
z-index: 2147483650;
}
/* 分享qq */
.shareListWin .i-qq {
margin-left: 8px;
/* qq图标 */
background: url(icons.png) no-repeat;
}
/* 分享微博 */
.shareListWin .i-weibo {
/* 微博图标 */
background: url(icons.png) no-repeat;
}
/* 分享易信 */
.shareListWin .i-yixin {
/* 易信图标 */
background: url(icons.png) no-repeat;
}
.shareListWin {
/* 绝对定位 和 坐标 */
position: absolute;
top: -999px;
left: -999px;
/* 宽度 和 高度 */
width: 101px;
height: 34px;
/* 边框 1像素宽 实线 颜色 */
border: 1px solid #dbdcdc;
/* 背景色 */
background: #fff;
box-sizing: content-box;
/* 展示优先级 */
z-index: 2147483650;
}
/* 分享qq */
.shareListWin .i-qq {
margin-left: 8px;
/* qq图标 */
background: url(icons.png) no-repeat;
}
/* 分享微博 */
.shareListWin .i-weibo {
/* 微博图标 */
background: url(icons.png) no-repeat;
}
/* 分享易信 */
.shareListWin .i-yixin {
/* 易信图标 */
background: url(icons.png) no-repeat;
}
楼层贴
css
#yun-tie-sdk-wrap .floor-tie {
/* 背景色 */
background-color: #f5fafe;
/* 每层向内缩进 3 像素 */
padding: 3px;
/* 边框样式 */
border: solid 1px #dee4e9;
}
#yun-tie-sdk-wrap .floor-tie {
/* 背景色 */
background-color: #f5fafe;
/* 每层向内缩进 3 像素 */
padding: 3px;
/* 边框样式 */
border: solid 1px #dee4e9;
}
高层折叠楼层
css
#yun-tie-sdk-wrap .floor-tie .hide-middle-posts {
/* 鼠标 手型 样式 */
cursor: pointer;
/* 高度 20 像素 */
height: 20px;
/* 文字行高 22 像素 */
line-height: 22px;
/* 上下 20 像素的 外 */
margin: 20px 0;
/* 文字居中对齐 */
text-align: center;
}
#yun-tie-sdk-wrap .floor-tie .hide-middle-posts {
/* 鼠标 手型 样式 */
cursor: pointer;
/* 高度 20 像素 */
height: 20px;
/* 文字行高 22 像素 */
line-height: 22px;
/* 上下 20 像素的 外 */
margin: 20px 0;
/* 文字居中对齐 */
text-align: center;
}
加载更多
css
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more {
/* 文字居中对齐 */
text-align: center;
/* 54像素的高度 */
height: 54px;
/* 行高 */
line-height: 50px;
/* 距离上面元素的间距 */
margin-top: 18px;
/* 字体类型 */
font-family: "Microsoft YaHei";
/* 字体大小 */
font-size: 18px;
/* 字体颜色 */
color: #999;
/* 边框圆角效果 */
border-radius: 4px;
}
/* 鼠标悬停效果(边框和字体颜色改变) */
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more:hover {
color: #3f96ec;
border-color: #3f96ec;
}
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more {
/* 文字居中对齐 */
text-align: center;
/* 54像素的高度 */
height: 54px;
/* 行高 */
line-height: 50px;
/* 距离上面元素的间距 */
margin-top: 18px;
/* 字体类型 */
font-family: "Microsoft YaHei";
/* 字体大小 */
font-size: 18px;
/* 字体颜色 */
color: #999;
/* 边框圆角效果 */
border-radius: 4px;
}
/* 鼠标悬停效果(边框和字体颜色改变) */
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more:hover {
color: #3f96ec;
border-color: #3f96ec;
}
分页栏
css
#yun-tie-sdk-wrap .tie-page {
text-align: center;
/* 上下 35像素的内边距 */
padding: 35px 0;
border-top: solid 1px #dee4e9;
color: #999;
}
#yun-tie-sdk-wrap .tie-page {
text-align: center;
/* 上下 35像素的内边距 */
padding: 35px 0;
border-top: solid 1px #dee4e9;
color: #999;
}
页码输入框
css
#yun-tie-sdk-wrap .tie-page input {
width: 50px;
text-align: center;
border: solid 1px #dee4e9;
color: #616060;
height: 25px;
margin: 0 6px;
/* 3像素的圆角效果 */
border-radius: 3px;
vertical-align: middle;
}
/* 光标聚焦到输入框内时,改变边框颜色 */
#yun-tie-sdk-wrap .tie-page input:focus {
border-color: #616060;
}
#yun-tie-sdk-wrap .tie-page input {
width: 50px;
text-align: center;
border: solid 1px #dee4e9;
color: #616060;
height: 25px;
margin: 0 6px;
/* 3像素的圆角效果 */
border-radius: 3px;
vertical-align: middle;
}
/* 光标聚焦到输入框内时,改变边框颜色 */
#yun-tie-sdk-wrap .tie-page input:focus {
border-color: #616060;
}
页码数字链接
css
#yun-tie-sdk-wrap .tie-page .page-num {
/* 左右间隔10像素 */
margin: 0 10px;
font-family: Arial;
/* 字体大小 */
font-size: 14px;
color: #999;
}
/* 鼠标悬停时 文字颜色变红 */
#yun-tie-sdk-wrap .tie-page .page-num:hover {
color: #e31436;
}
/* 当前页 第2页 页码样式*/
#yun-tie-sdk-wrap .tie-page .page-num.z-current {
/* 文字白色 */
color: #fff;
/* 背景红色 */
background-color: #e31436;
min-width: 24px;
cursor: default;
margin: 0 7px;
border-radius: 4px;
}
#yun-tie-sdk-wrap .tie-page .page-num {
/* 左右间隔10像素 */
margin: 0 10px;
font-family: Arial;
/* 字体大小 */
font-size: 14px;
color: #999;
}
/* 鼠标悬停时 文字颜色变红 */
#yun-tie-sdk-wrap .tie-page .page-num:hover {
color: #e31436;
}
/* 当前页 第2页 页码样式*/
#yun-tie-sdk-wrap .tie-page .page-num.z-current {
/* 文字白色 */
color: #fff;
/* 背景红色 */
background-color: #e31436;
min-width: 24px;
cursor: default;
margin: 0 7px;
border-radius: 4px;
}
页码跳转按钮 上一页 下一页
css
#yun-tie-sdk-wrap .tie-page .to-btn {
width: 24px;
background-color: #e6f1f9;
border-radius: 2px;
/* 距离右边元素 35 像素的间距 */
margin: 0 35px 0 6px;
}
/* 鼠标悬停时,改变文字和背景颜色 */
#yun-tie-sdk-wrap .tie-page .to-btn:hover {
color: #4e9ded;
background-color: #d2e8ff;
}
/* 上一页 和 下一页 按钮 鼠标悬停效果 */
#yun-tie-sdk-wrap .tie-page .page-btn:hover {
color: #616060;
}
#yun-tie-sdk-wrap .tie-page .to-btn {
width: 24px;
background-color: #e6f1f9;
border-radius: 2px;
/* 距离右边元素 35 像素的间距 */
margin: 0 35px 0 6px;
}
/* 鼠标悬停时,改变文字和背景颜色 */
#yun-tie-sdk-wrap .tie-page .to-btn:hover {
color: #4e9ded;
background-color: #d2e8ff;
}
/* 上一页 和 下一页 按钮 鼠标悬停效果 */
#yun-tie-sdk-wrap .tie-page .page-btn:hover {
color: #616060;
}
帖子列表为空时的提示栏
css
#yun-tie-sdk-wrap .tie-panel-bar .tie-empty-tip {
color: #999999;
font-size: 14px;
text-align: center;
line-height: 1em;
/* 上下 66像素的间距 */
padding: 66px 0;
}
#yun-tie-sdk-wrap .tie-panel-bar .tie-empty-tip {
color: #999999;
font-size: 14px;
text-align: center;
line-height: 1em;
/* 上下 66像素的间距 */
padding: 66px 0;
}
个人弹窗页面
css
#yun-tie-sdk-wrap .tie-i-wrap {
/* 固定定位 */
position: fixed;
/* 展示在页面中央 */
width: 752px;
height: 620px;
top: 50%;
left: 50%;
margin-top: -310px;
margin-left: -410px;
/* 左右 34 像素的内边距 */
padding: 0 34px;
background: #fff;
/* 展示层级 */
z-index: 2147483649;
/* 边框阴影效果 */
box-shadow: 0 0 30px 3px rgba(119, 118, 118, 0.33);
}
#yun-tie-sdk-wrap .tie-i-wrap {
/* 固定定位 */
position: fixed;
/* 展示在页面中央 */
width: 752px;
height: 620px;
top: 50%;
left: 50%;
margin-top: -310px;
margin-left: -410px;
/* 左右 34 像素的内边距 */
padding: 0 34px;
background: #fff;
/* 展示层级 */
z-index: 2147483649;
/* 边框阴影效果 */
box-shadow: 0 0 30px 3px rgba(119, 118, 118, 0.33);
}
个人页 头像
css
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .photo {
/* 圆角效果 */
border-radius: 50%;
width: 62px;
height: 62px;
margin-top: 20px;
/* 向下偏移14 像素 */
position: relative;
top: 14px;
}
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .photo {
/* 圆角效果 */
border-radius: 50%;
width: 62px;
height: 62px;
margin-top: 20px;
/* 向下偏移14 像素 */
position: relative;
top: 14px;
}
个人页 昵称
css
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .nickname {
font-size: 14px;
line-height: 14px;
position: relative;
top: 10px;
margin-top: 10px;
color: #333;
}
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .nickname {
font-size: 14px;
line-height: 14px;
position: relative;
top: 10px;
margin-top: 10px;
color: #333;
}
个人页 选项卡栏
css
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar {
zoom: 1;
font-size: 14px;
margin-top: 30px;
height: 40px;
overflow: hidden;
}
/* 聚焦状态的选项卡 */
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar > div.z-fcs {
/* 白色文字 */
color: #fff;
/* 红色背景 */
background-color: #e31436;
/* 隐藏边框 */
border: none;
}
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar {
zoom: 1;
font-size: 14px;
margin-top: 30px;
height: 40px;
overflow: hidden;
}
/* 聚焦状态的选项卡 */
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar > div.z-fcs {
/* 白色文字 */
color: #fff;
/* 红色背景 */
background-color: #e31436;
/* 隐藏边框 */
border: none;
}
个人页 来自信息
css
#yun-tie-sdk-wrap .tie-i-wrap .single-tie .tool-bar .essay-link {
/* 左浮动对齐 */
float: left;
/* 浅灰色文字 */
color: #999;
}
#yun-tie-sdk-wrap .tie-i-wrap .single-tie .tool-bar .essay-link {
/* 左浮动对齐 */
float: left;
/* 浅灰色文字 */
color: #999;
}